<template>
  <validate-from action="" @form-submit='onFormSubmit'>
      <div class="mb-3">
        <label for="exampleInputEmail" class="form-label">邮箱地址</label>
        <validate-input
          :rules="emailrules"
          v-model="emailValue"
          placeholder= '输入您的邮箱'
          type= "text"
        />
      </div>
        <div class="mb-3">
        <label for="exampleInputEmail" class="form-label">密码</label>
        <validate-input
          :rules="passwordrules"
          v-model="password"
          placeholder= '输入您的密码'
          type= "password"
        />
      </div>
      <template #submit>
        <span class="btn btn-danger">submit</span>
      </template>
    </validate-from>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import createMessage from '../components/createMessage'
import ValidateFrom from '../components/ValidateFrom.vue'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    ValidateInput,
    ValidateFrom
  },
  setup () {
    const store = useStore()
    const router = useRouter()
    const emailValue = ref('111@test.com')
    const password = ref('111111')
    const emailrules: RulesProp = [
      { type: 'required', message: '电子邮箱不能为空' },
      { type: 'eamil', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordrules: RulesProp = [
      { type: 'required', message: '密码不能为空' }
    ]
    const onFormSubmit = (result: boolean) => {
      console.log('resultresult', result)
      if (result) {
        // store.commit('login')
        const payload = {
          email: emailValue.value,
          password: password.value
        }
        store.dispatch('loginAndFetch', payload).then(data => {
          createMessage('登陆成功两秒以后跳转首页', 'success')
          setTimeout(() => {
            router.push('/')
          }, 2000)
        }).catch(e => {
          console.log(e)
        })
        // router.push({ name: 'column', params: { id: 1 } })
      }
    }
    return {
      emailrules,
      emailValue,
      passwordrules,
      password,
      onFormSubmit
    }
  }
})
</script>

<style>

</style>
